<template>
  <div class="slider">
    <div class="slider-item">
      <i class="el-icon-circle-close" @click="closeSlider" />
      <slide-verify
        :l="42"
        :r="10"
        :w="310"
        :h="155"
        :slider-text="text"
        @success="onSuccess"
        @fail="onFail"
        @refresh="onRefresh"
      />
      <div style="margin-top:15px;height: 30px;">
        <div v-if="isSuccess === 1" class="success-message">{{ successMessage }}</div>
        <div v-if="isSuccess === -1" class="error-message">{{ errorMessage }}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Slider',
  data() {
    return {
      text: '向右滑动',
      isSuccess: 0,
      successMessage: '',
      errorMessage: ''
    }
  },
  methods: {
    onSuccess(times) {
      this.isSuccess = 1
      const ms = (times / 1000).toFixed(1)
      this.successMessage = '验证成功, 耗时 ' + ms + 's'
      this.$emit('SliderSuccess')
    },
    onFail() {
      this.isSuccess = -1
      this.errorMessage = '验证失败请重试'
      setTimeout(() => {
        this.isSuccess = 0
      }, 1000)
    },
    onRefresh() {
      this.isSuccess = 0
      this.successMessage = ''
      this.errorMessage = ''
    },
    closeSlider() {
      this.$emit('closeSlider')
    }
  }
}
</script>
<style lang="scss" scoped>
.slider{
  position: absolute;
  width:100%;
  height:100vh;
  margin: auto;
  background-color: rgba(0,0,0,0.1);
  z-index:1;

}
.slider-item{
  position: relative;
  background: white;
  width: 350px;
  height: 300px;
  left: 50%;
  top: 40%;
  transform: translate(-50%,-50%);
  padding:10px 20px 20px 20px;
  i {
    display: inline-block;
    position: relative;
    top:-5px;
    left: 310px;
    width:20px;
    height: 20px;
    cursor: pointer;
    z-index: 10;
  }
.success-message{
  text-align: center;
  margin-top: 15px;
  color: #33ff35;
}
.error-message{
  text-align: center;
  color: #fd1715;
}
}
</style>
